<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>ZTREE DEMO</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${base}/scripts/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="${base}/css/tree.css" type="text/css">
<script type="text/javascript" src="${base}/scripts/plugins/jquery-1.7.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.excheck-3.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.exedit-3.1.js"></script>

<SCRIPT type="text/javascript">
	<#assign nodes = 0>
	var zNodes = [ 
		<#list userGroupList as group>
		{
			id: ${(group.id)!0}, 
			pId: ${(group.parentId)!0}, 
			name: "${(group.name)!''}", 
			open: true, 
			target: "user_right"
		}<#if group_index != (userGroupList?size - 1)>
			,
		</#if>
		<#if (group.parentId) = '0'>
			<#assign nodes = (nodes + 1)>
		</#if>
		</#list>
	];
	
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		edit: {
			enable: true,
			editNameSelectAll: true
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeEditName: beforeEditName,
			beforeRemove: beforeRemove,
			beforeRename: beforeRename,
			onRightClick: OnRightClick, 
			onRename: onRename,
			onClick: onClick, 
			beforeDrop: beforeDrop, 
			onDrop: onDrop
		}
	};
	
	
	var log, className = "dark";
	function beforeEditName(treeId, treeNode) {
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
	}
	
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		if (confirm("确认移动" + treeNodes[0].name + "节点吗？")) {
			return true;
		}
		return false;
	}

	function onDrop(event, treeId, treeNodes, targetNode, moveType) {
		var parentId;
		if ((targetNode.isParent) || (targetNode.getParentNode() == null)) {
			parentId = 0;
		} else {
			parentId = targetNode.getParentNode().id;
		}
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var childNodes = treeObj.getSelectedNodes();
		if (childNodes.length > 0) {
			index = treeObj.getNodeIndex(childNodes[0]);
		}
		var nodes = treeObj.getNodes();
		var child;
		for (i in nodes) {
			if (nodes[i].id == parentId) {
				child = treeObj.getNodes()[i].children;
			}
		}
		if (parentId == 0) {
			for (index; index < nodes.length; index ++) {
				$.post("${base}/oauth/userGroup/update.action", {"userGroup.id" : nodes[index].id, "userGroup.parentId" : parentId, "userGroup.orderNo" : index}, function(data){});
			}
		} else {
			for (index; index < child.length; index ++) {
				$.post("${base}/oauth/userGroup/update.action", {"userGroup.id" : child[index].id, "userGroup.parentId" : parentId, "userGroup.orderNo" : index}, function(data){});
			}
		}
	}
	
	function beforeRemove(treeId, treeNode) {
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
		var childNodes = zTree.transformToArray(treeNode);
		if (childNodes.length > 1) {
			alert("该节点存在子节点，请先删除子节点");
			return false;
		}
		if(confirm("确认删除" + treeNode.name + "节点吗？")) {
			window.location.href = "${base}/oauth/userGroup/delete.action?userGroup.id=" + treeNode.id;
		}
		return false;
	}
	
	function beforeRename(treeId, treeNode, newName) {
		className = (className === "dark" ? "":"dark");
		if (newName.length == 0) {
			alert("节点名称不能为空.");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			setTimeout(function(){zTree.editName(treeNode)}, 10);
			return false;
		}
		return true;
	}
	
	function onRename(e, treeId, treeNode) {
		$.post("${base}/oauth/userGroup/update.action", {"userGroup.id" : treeNode.id, "userGroup.name" : treeNode.name}, function(data){});
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
		var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
			+ "' title='添加新节点' onfocus='this.blur();'></button>";
		sObj.append(addStr);
		var btn = $("#addBtn_"+treeNode.id);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var childNodes = zTree.transformToArray(treeNode);
			orderNo = (childNodes.length) - 1;
			zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新用户组"});
			window.location.href = "${base}/oauth/userGroup/addUserGroup.action?userGroup.parentId=" + treeNode.id + "&userGroup.name=新用户组"+ "&userGroup.orderNo=" + orderNo;
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.id).unbind().remove();
	};
	
	function onClick(e,treeId, treeNode) {
		window.parent.content.location.href = "${base}/oauth/userGroup/findUsersByGroupId.action?userGroup.id=" + treeNode.id;
		return false;
	}
	
	function OnRightClick(event, treeId, treeNode) {
		showRMenu(event.clientX, event.clientY);
	}
	
	var addCount = 1;
	function addRightNode() {
		hideRMenu();
		var orderNo = "${nodes}";
		window.location.href = "${base}/oauth/userGroup/addUserGroup.action?userGroup.parentId=0&userGroup.name=新用户组" + "&userGroup.orderNo=" + orderNo;
	}
	function showRMenu(x, y) {
		$("#rMenu ul").show();
		$("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"});
		$("body").bind("mousedown", onBodyMouseDown);
	}
	function hideRMenu() {
		if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}

	var zTree, rMenu;
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
		rMenu = $("#rMenu");
	});

	</SCRIPT>
</HEAD>
<body >
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addRightNode();">增加根节点</li>
	</ul>
 </div>
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</HTML>